// header.js

const AppHeader = {
    name: 'AppHeader',
    template: `
       <el-header>
                <el-button @click="$emit('toggleSidebar')" style="    background-color: #344a5f;">
               <i :class="sidebarCollapsed ? 'fa-solid fa-bars' : 'fa-solid fa-bars'"></i>  
                </el-button>
                <h1>图书借阅管理系统</h1>
                <div class="header-right" style="margin-left: auto;">
                    <span class="role">管理员</span>
                    <span class="separator">|</span>
                    <div>
                        <img class="avatar" src="/site/images/avatar/avatart5.png" alt="Avatar">
                        <span class="username">用户名</span>
                    </div>
                    <span><i class="fa-solid fa-arrow-right-from-bracket" @click="handleLogout"></i> </span>
                </div>
            </el-header>
    `,
    // 接收父组件传递的状态
    props: {
        sidebarCollapsed: {
            type: Boolean,
            default: false
        }
    },
    emits: ['toggleSidebar'], // 组件设置函数
    setup(props, {emit}) {

        //     const username = ref('');
        //     const userData = localStorage.getItem('user');
        //     console.log("userData",userData);
        //
        //     username.value = (userData!=null) ? JSON.parse(userData).username : "" ;
        //
        //
            const handleLogout =  () => {
                console.log("注销");
                axiosInstance.post('/api/logout')
                    .then(response => {
                        // 清除本地存储中的用户信息
                        localStorage.removeItem('user');
                        message.success("注销成功");
                        // 重定向到登录页面
                        setTimeout(() => {
                            window.location.href = '/login';
                        }, 300);
                    })
                    .catch(error => {
                        console.error('注销失败:', error);
                    });
            };

            return {handleLogout };
    }
}
